<template>
  <div class="home">
    <!-- <div class="header" >
      <img class="img" src="../../assets/logo.png" />
      <van-search v-model="value" shape="round"  placeholder="请输入搜索关键词" @click="pushSearch" />
      <van-button type="primary" size="mini" color="red"> 登录 </van-button>
    </div> -->
     <HeaderSearch>
            <template #left>
                <div>网易严选</div>
              </template>
            <template #right>
                <div class="loginBtn">
                      登录
                  </div>
              </template>
          </HeaderSearch>
    <div class="nav">
      <van-tabs v-model:active="active" @click-tab="change">
        <van-tab title="推荐" :name="-1"></van-tab>
        <van-tab v-for="(item, index) in navList" :key="item.id" :name="item.id" :title="item.name"></van-tab>
      </van-tabs>
    </div>
    <div class="floor1" v-show="currentId === -1">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in allData.focusList" :key="index">
          <div class="van-swipe-item">
            <img class="swipeImg" :src="item.picUrl" alt="" />
          </div>
        </van-swipe-item>
      </van-swipe>

      <!-- 小图 -->
      <div class="FooterImg">
        <div v-for="(item, index) in allData.policyDescList" :key="index">
          <img :src="item.icon" />
          <text class="text">{{ item.desc }}</text>
        </div>
      </div>

      <!-- 列表 -->
      <div class="list">
        <div class="item" v-for="(item, index) in kingKongList.kingKongList" :key="index" :title="item.text" @click="changId(item.text)">
          <img class="itemImg" :src="item.picUrl" />
          <text class="itemText">{{ item.text }}</text>
        </div>
      </div>

      <!-- 推荐 -->
      <div class="recommend">
        <div class="reTop">
          <van-swipe class="re-swipe" :autoplay="3000" indicator-color="white" show-indicators>
            <van-swipe-item v-for="(item, index) in allData">
              <div class="re-swipe-item">
                <img class="reSwipeImg" src="https://yanxuan-item.nosdn.127.net/ae813e40dccd34cad564c34fa65e28ce.png" alt="" />
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="re-swipe-item">
                <img class="reSwipeImg" src="https://yanxuan-item.nosdn.127.net/199dd0f4a8115bc12726357f8c4c9d2a.png" alt="" />
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="re-swipe-item">
                <img class="reSwipeImg" src="https://yanxuan-item.nosdn.127.net/c7772f09262c6579773663c09baa51bb.png" alt="" />
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="re-swipe-item">
                <img class="reSwipeImg" src="https://yanxuan-item.nosdn.127.net/2f975063d1996ba96a28d80814d8b1c3.png" alt="" />
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="reList">
          <div class="reItem" style="
               {
                background-image: 'url(' + item + ')';
              }
            ">
            <img class="reItemImg" src="https://yanxuan-item.nosdn.127.net/7539d2270af135e28ed21bb41f33ae40.png" />
          </div>
          <div class="reItem">
            <img class="reItemImg" src="https://yanxuan-item.nosdn.127.net/c7772f09262c6579773663c09baa51bb.png" />
          </div>
          <div class="reItem">
            <img class="reItemImg" src="https://yanxuan-item.nosdn.127.net/1ca655afb3ab497c3e16e68bf4820b3a.png" />
          </div>
        </div>
      </div>
      <!--卡片一 -->
      <div class="card1">
        <div class="title">— 新人专享礼 —</div>
        <div class="content">
          <div class="left">
            <text class="leftText">新人专享礼包</text>
            <img class="leftImg" src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" />
          </div>
          <div class="right">
            <div class="top" v-for="(item, index) in allData.indexActivityModule" :key="index">
              <div class="topText">
                <div class="topTitle">{{ item.title }}</div>
                <div class="subTitle">{{ item.subTitle }}</div>
                <text class="tag">{{ item.tag }}</text>
              </div>
              <div class="topPic">
                <div class="topImg">
                  <img class="tg" :src="item.showPicUrl" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热销 -->
      <div class="hot">
        <div class="hotTitle">类目热销榜</div>
        <div class="main">
          <div class="line1">
            <div class="line1-item" v-for="(item, index) in categoryList?.cateList1" :key="index">
              <div class="name">{{ item.name }}</div>
              <img class="lineImg" :src="item.pic" />
            </div>
          </div>
          <div class="line2">
            <div class="line2-item" v-for="(item, index) in categoryList?.cateList2">
              <div class="line2-name">{{ item.name }}</div>
              <img class="line2Img" :src="item.pic" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="last">
        <div class="lastItem">
          <div class="name1">穿新衣</div>
          <div class="name2">两件75折</div>
        </div>
        <div class="lastItem1">
          <div class="content1">
            <div class="name3">严选众筹</div>
            <div class="name4">探索美与用</div>
            <div class="lastImg">
              <img class="img1" src="https://yanxuan-item.nosdn.127.net/e9f01fb9a3d9e18f7a42dd9231390beb.png?quality=75&type=webp&imageView&thumbnail=150x150" alt="" />
              <img class="img1" src="https://yanxuan-item.nosdn.127.net/d398ebb1be7fd30f1e3c2a41b30c4ba9.png?quality=75&type=webp&imageView&thumbnail=150x150" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- footer -->
      <div class="footer">
        <div class="bd">
          <div class="app">下载APP</div>
          <div class="computer">电脑版</div>
        </div>
        <div class="detail">
          <p class="copyright">
            网易公司版权所有©1997-2022 <br />
            食品经营许可证：JY13301080111719
          </p>
        </div>
      </div>
    </div>

    <div class="floor2" v-show="currentId !== -1">
      <Card :navList="navList"></Card>
    </div>
    <TabbarServe></TabbarServe>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Home'
};
</script>

<script lang="ts" setup>
import { computed } from '@vue/reactivity';
import { ref, onMounted, watch, onUnmounted } from 'vue';

import { useHomeStore } from '../../store/home';
import { useCardStore } from '../../store/card';

import { useRouter } from 'vue-router';
import Card from '../Home/card.vue';

const currentId = ref(-1);

const value = ref('');
const active = ref(0);
const homeStore = useHomeStore();
const cardStore = useCardStore();
//拿数据
const kingKongList = ref<any>({});
kingKongList.value = homeStore.homeData;

const allData = ref();
allData.value = homeStore.allData;

const categoryList = ref();
categoryList.value = homeStore.categoryList[0];

const id = ref();
id.value = homeStore.id;

const navList = ref();
navList.value = cardStore.navList;
//底部
// const last = ref()
// last.value = homeStore.last

// const navList = ref()
const idData = ref();
const router = useRouter();

const changId = (id: any) => {
  idData.value = navList.value.find((item: any) => item.name === id);
  //调用传ID
  cardStore.getCardList(idData.value.id);
  // console.log(idData.value.id);
  router.push({
    name: 'Card',
    query: { id: idData.value.id }
  });
};
//切换
const change = async (options: any) => {
  // console.log('options', options);
  currentId.value = options.name;
  await cardStore.getCardData();
  await cardStore.getCardList(options.name * 1);
};

onMounted(async () => {
  await homeStore.getData();
  await cardStore.getCardData();
});

watch(
  () => homeStore.homeData,
  newValue => {
    // console.log('newValue', newValue);
    kingKongList.value = newValue;
  },
  {
    immediate: true,
    deep: true
  }
);

watch(
  () => homeStore.allData,
  newValue => {
    // console.log('newValue', newValue);
    allData.value = newValue;
  },
  {
    immediate: true,
    deep: true
  }
);

watch(
  () => homeStore.categoryList[0],
  newValue => {
    // console.log('newValue', newValue);
    categoryList.value = newValue;
  },
  {
    immediate: true,
    deep: true
  }
);
const pushSearch = () => {
  router.push('/search');
};
watch(
  () => cardStore.navList,
  newValue => {
    // console.log('newValue', newValue);
    navList.value = newValue;
  },
  {
    immediate: true,
    deep: true
  }
);

// console.log('allData', allData);
// console.log('kingKongList', kingKongList);
// console.log('categoryList1111222', categoryList);
// console.log('navList55555', navList);
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  width: 100%;
  // .header {
  //   display: flex;
  //   align-items: center;
  //   margin: 6px 10px;
  //   background-color: #f5f5f5;
  //   .img {
  //     width: 69px;
  //     height: 20px;
  //     background-color: #fff;
  //   }
  //   .search {
  //     width: 221px;
  //     height: 28px;
  //     // background-color: gray;
  //   }
//   // }
  .loginBtn{
    width: 37px;
    height: 25px;
    font-size: 10px;
    border: 1px solid red;
    line-height: 10px;
    text-align: center;
    border-radius: 5px;
    color: red;
    padding-left: 5px;
  }
  .my-swipe {
    width: 100%;
    height: 148px;
    .van-swipe-item {
      // width: 100%;
      // height: 150px;
      background-color: aquamarine;
      padding: 0;
      .swipeImg {
        height: 148px;
        width: 100%;
      }
    }
  }
  .FooterImg {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    img {
      width: 16px;
      height: 16px;
    }
    .text {
      font-size: 12px;
    }
  }
  .list {
    width: 100%;
    height: 174.5px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .item {
      width: 55px;
      height: 78px;
      margin: 5px 10px 4.5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .itemImg {
        width: 55px;
        height: 55px;
      }
      .itemText {
        margin-top: 3px;
        font-size: 12px;
      }
    }
  }
  .recommend {
    height: 230px;
    width: 100%;
    .reTop {
      width: 100%;
      height: 100px;
      background-image: url('https://yanxuan.nosdn.127.net/static-union/1667467054274a01.gif?imageView&quality=75');
      background-size: 100% 100%;
      position: relative;
      .re-swipe {
        width: 84px;
        height: 84px;
        position: absolute;
        left: 39px;
        top: 10px;
        .re-swipe-item {
          .reSwipeImg {
            width: 82px;
            height: 84px;
          }
        }
      }
    }
    .reList {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 10px;
      .reItem {
        width: 115.5px;
        height: 110px;
        position: relative;
        background-image: url('https://yanxuan.nosdn.127.net/static-union/16674671268a6466.png?quality=75&type=webp&imageView&thumbnail=250x0');
        background-size: 100% 100%;
        .reItemImg {
          position: absolute;
          bottom: 3px;
          left: 23px;
          width: 70px;
          height: 67px;
        }
      }
    }
  }
  .card1 {
    height: 279px;
    width: 100%;
    .title {
      height: 45px;
      width: 345px;
      font-size: 16px;
      text-align: center;
      line-height: 45px;
    }
    .content {
      height: 219px;
      display: flex;
      align-items: center;
      margin-left: 14px;
      .left {
        width: 171.5px;
        height: 217px;
        background-color: #f9e9cf;
        margin-right: 3px;
        box-sizing: border-box;
        .leftText {
          display: block;
          width: 171.5px;
          height: 39px;
          font-size: 15px;
          line-height: 39px;
          margin-left: 15px;
          padding-top: 5px;
        }
        .leftImg {
          width: 129px;
          height: 128.5px;
          margin: 10px 20px 20px 20px;
        }
      }
      .right {
        // background-color: #fbe2d3;
        width: 171.5px;
        height: 217px;
        .top {
          width: 100%;
          height: 107.5px;
          background-color: #fbe2d3;
          margin-bottom: 2px;
          box-sizing: border-box;
          display: flex;
          position: relative;
          .topText {
            .topTitle {
              font-size: 15px;
              padding-top: 5px;
              margin: 0 3px 3px 5px;
            }
            .subTitle {
              font-size: 8px;
              margin: 0 3px 3px 5px;
            }
            .tag {
              font-size: 12px;
            }
          }
          .topPic {
            width: 100px;
            .topImg {
              .tg {
                width: 100px;
                height: 100px;
                position: absolute;
                right: 0;
                bottom: 0;
              }
            }
          }
        }
        .bottom {
          width: 100%;
          height: 107.5px;
          background-color: #ffecc2;
          box-sizing: border-box;
          display: flex;
          position: relative;
          .botText {
            .botTitle {
              font-size: 15px;
              padding-top: 5px;
              margin: 0 3px 3px 5px;
            }
            .subTitle2 {
              font-size: 5px;
              margin: 0 3px 3px 5px;
            }
          }
          .botPic {
            width: 100px;
            .botImg {
              .bg {
                width: 100px;
                height: 100px;
                position: absolute;
                right: 0;
                bottom: 0;
              }
            }
          }
        }
      }
    }
  }
  .hot {
    width: 350px;
    height: 355px;
    padding: 0 10px 15px 12px;
    .hotTitle {
      font-size: 16px;
      height: 50px;
      width: 355px;
      line-height: 50px;
    }
    .main {
      height: 305px;
      .line1 {
        display: flex;
        background-color: aliceblue;
        justify-content: space-between;
        .line1-item {
          width: 170px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #f9f3e4;
          .name {
            font-size: 14px;
            margin-left: 5px;
          }
          .lineImg {
            width: 100px;
            height: 100px;
          }
        }
      }
      .line2 {
        display: flex;
        flex-wrap: wrap;
        .line2-item {
          width: 82.5px;
          height: 90px;
          background-color: #f5f5f5;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 5px;
          margin-top: 5px;
          .line2-name {
            font-size: 12px;
            margin: 5px;
          }
          .line2Img {
            width: 60px;
            height: 60px;
          }
        }
      }
    }
  }
  .last {
    margin: 80px 0 0 10px;
    width: 350px;
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .lastItem {
      width: 171.5px;
      height: 132px;
      background-image: url('https://yanxuan.nosdn.127.net/static-union/1665495820b48c01.png?imageView&thumbnail=343x264');
      background-size: 100% 100%;
      background-color: #f5f5f5;
      .name1 {
        font-size: 16px;
        margin: 10px 10px;
        z-index: 2;
      }
      .name2 {
        font-size: 12px;
        margin: 10px 10px;
        color: #927f7f;
      }
    }
    .lastItem1 {
      width: 171.5px;
      height: 132px;
      background-color: #f5f5f5;

      .content1 {
        .name3 {
          font-size: 16px;
          margin: 5px 10px;
        }
        .name4 {
          font-size: 12px;
          color: red;
          margin: 0 0 10px 10px;
        }
        .lastImg {
          display: flex;
          align-items: center;
          margin-left: 10px;
          .img1 {
            width: 75px;
            height: 75px;
            margin-left: 1px;
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 130px;
    background-color: #414141;
    .bd {
      width: 100%;
      height: 31px;
      display: flex;
      justify-content: space-evenly;
      text-align: center;
      padding-top: 30px;
      .app {
        width: 86px;
        height: 31px;
        border: 1px solid #fff;
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 31px;
      }
      .computer {
        width: 86px;
        height: 31px;
        border: 1px solid #fff;
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 31px;
      }
    }
    .detail {
      width: 355px;
      height: 32px;
      color: #999;
      padding-top: 6px;
      .copyright {
        width: 100%;
        font-size: 12px;
        text-align: center;
        line-height: 16px;
      }
    }
  }
}
</style>


   
